<template>
  <img :src="src" :alt="alt" class="u-images" @error="imageError" @click="clickEvent" />
</template>

<script setup>
const props = defineProps({
  src: { type: String, default: '' },
  alt: { type: String, default: '' }
});
const emits = defineEmits(["customClick"])
function imageError (error) {
  error.target.src = "https://tse2-mm.cn.bing.net/th/id/OIP-C.xGTInVTOkiPa4bx7tQWxzwHaEn?rs=1&pid=ImgDetMain"
}

function clickEvent (e) {
  emits("customClick", e)
}
</script>

<style lang="scss" scoped>
.u-images {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 10%;
  border: 1px solid #ccc;
  overflow: hidden;
}
</style>